import UserAvatar from "@/components/user/user-avatar";
import { RatingDto } from "@/apis/__generated/model/dto";
import dayjs from "dayjs";
import { Dictionaries } from "@/apis/__generated/model/enums/DictConstants";
import { Ellipsis, Rate } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";
import { Image } from "@tarojs/components";
import "./rating-row.scss";

export default function RatingRow({
  rating,
}: {
  rating: RatingDto["RatingRepository/COMPLEX_FETCHER_FOR_FRONT"];
}) {
  const handlePreview = (index: number) => {
    Taro.previewImage({
      current: index,
      urls: rating.pictures as string[],
    });
  };

  return (
    <div className="rating-row">
      <div className="user">
        <UserAvatar src={rating.creator.avatar}></UserAvatar>
        <div className="info">
          <div className="name">{rating.creator.nickname}</div>
          <div className="sex">
            {Dictionaries.Gender[rating.creator.gender || "PRIVATE"].keyName}
          </div>
        </div>
        <div className="time">{dayjs(rating.createdTime).fromNow()}</div>
      </div>
      <Rate className="rate" value={rating.score}></Rate>
      <Ellipsis
        className="content"
        content={rating.content}
        direction="end"
        rows="3"
        expandText="展开"
        collapseText="收起"
      />
      <div className="pictures">
        {rating.pictures?.map((pic, index) => {
          return (
            <div
              className="picture"
              key={pic}
              onClick={() => handlePreview(index)}
            >
              <Image src={pic} mode="aspectFill" />
            </div>
          );
        })}
      </div>
    </div>
  );
}
